<template>
  <div class="user-login">
    <van-nav-bar title="登录"></van-nav-bar>
       <!-- 表单部分
      vant里边没有form相关组件，只有普通表单域组件
      van-cell-group是对普通表单域组件做封装
     -->
    <van-cell-group>
      <!--van-field 输入框表单域组件
        label="手机号" 表单域前边的名字设置
        required：不进行校验，设置表单域前边有"红星"
        clearable：表单域内容可以通过“叉号”清除
      -->
      <ValidationObserver ref="loginFormRef">
      <ValidationProvider name="手机号" rules="required|phone" v-slot="{ errors }">
      <van-field
        v-model="loginForm.mobile"
        type="text"
        placeholder="请输入手机号码"
        label="手机号"
        required
        clearable
        :error-message="errors[0]"
      /></ValidationProvider>
      <ValidationProvider name="验证码" rules="required" v-slot="{ errors }">
      <van-field
        v-model="loginForm.code"
        type="password"
        placeholder="请输入验证码"
        label="验证码"
        required
        clearable
        :error-message="errors[0]"
      >
        <!-- 命名插槽应用，提示相关按钮，是要给van-field组件内部的slot去填充的
        size="small" 设置按钮大小的
        type="primary" 设置按钮背景颜色
        -->
        <van-button slot="button" size="small" type="primary">发送验证码</van-button>
      </van-field>
      </ValidationProvider>
      </ValidationObserver>
    </van-cell-group>
    <div class="login-btn">
      <!--van-button
        type:按钮背景颜色
        size:按钮大小的
        round：圆圈效果
        block：块级样式设置，占据一行
      -->
      <van-button
      type="info"
      size="small"
      round
      block
      @click="login()"
      :loading="isLogin"
      loading-text="登录中...">登录</van-button>
    </div>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import { apiUserLogin } from '@/api/user.js'
export default {
  name: 'user-login',
  components: {
    // 注册
    ValidationProvider,
    ValidationObserver
  },
  data () {
    return {
      loginForm: {
        mobile: '13922222222',
        code: '246810'
      },
      isLogin: false // 登录按钮是否加载等待
    }
  },
  methods: {
    async login () {
      // 对表单全部项目做校验，没有问题在向下执行
      // ValidationObserver
      // validate()返回promise对象
      // valid=true  校验成功   valid=false  校验失败
      const rst = await this.$refs.loginFormRef.validate()
      if (!rst) {
        // 校验失败 ，停止后续代码执行
        return false
      }
      // 按钮处于加载中
      this.isLogin = true
      try {
        // 校验账号有效性
        // 所有Api函数返回结果就是axios返回结果，就是promise对象
        const result = await apiUserLogin(this.loginForm)
        // console.log(result)
        this.$store.commit('updateUser', result)
      } catch (err) {
        // 回复按钮加载中状态
        this.isLogin = false
        // 账号错误，$toast.fail是vant组件库的“错误提示”应用语法
        // return表示停止后续代码执行
        // 与之前的$message.error()是对应的
        return this.$toast.fail('用户名或验证码错误' + err)
      }
      // 回复按钮加载中状态
      this.isLogin = false
      this.$toast.success('登录成功')
      // 页面跳转
      this.$router.push('/')
    }
  }
}
</script>

<style scoped lang='less'>
// 登录按钮样式
.login-btn {
  margin: 40px;
}
</style>
